<template>
  <div id="app">

    <div id="top"><span>新闻</span></div>
    <div v-if="htmlData">
      <p v-html="this.htmlData">
      </p>
    </div>
    <div v-else>

    <el-tabs  v-model="activeName" @tab-click="handleClick">

      <el-tab-pane v-for="item in list"  :name = "item.title" :label="item.title">
      </el-tab-pane>
     </el-tabs>
      <Banner @getHtmlData="getHtmlData" :url="this.lists"></Banner>

      </div>
  </div>
</template>
<script>
  import Banner from './components/banner.vue'
  export default {
     name: 'App',
     components:{
       Banner
     },
    data() {
      return {
        activeName: '',
        list:[],
        url:"",
        lists:{},
        htmlData:""

      }
    },
    mounted() {
      this.$axios.get("/local/web_home/static/api/news/categories.json").then((response)=>{

        /* 默认子组件的数据*/
         this.list=response.data.data[0].children
         this.activeName = this.list[0].title
         this.url =this.list[0].url
         this.sendRequest(this.list[0].url);
      })
    },
    methods: {
      /** 点击时发送请求
       * @param {Object} tab
       * @param {Object} event
       */
      handleClick(tab, event) {
        this.sendRequest( this.list[tab.index].url);

      },
      sendRequest(baseUrl){
        this.$axios.get("/local/web_home" + baseUrl).then((response) => {
            this.lists=response.data.data
            console.log(response.data.data)
        })
      },
      getHtmlData(src) {
        console.log(src);
        this.$axios.get(src).then((response)=>{
            let data = response.data;
            var startIndex = data.indexOf("<article style=\"display: block;\">");
            var endIndex = data.indexOf("<br/>");
            let html = data.substring(startIndex,endIndex)
            this.htmlData = html;

          })
      }
    }
  };
</script>

<style>
  * {
    margin: 0px;
    padding: 0px;
  }

  #top {
    background-color: rgb(84, 92, 100);
    color: #ffd04b;
    height: 61px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
